<template>
    <div class="raiseGoods">
        <div class="z-header tc width-75 b-c2 c-f">
            <div @click="$router.back(-1)" class="lt">
                <i class="iconfont icon-zuo m-t-18"></i>
            </div>
            <div class="fs-36">
                我的筹帮
            </div>
        </div>
        <mt-navbar class="page-part" v-model="selected">
            <mt-tab-item id="1">我的抢单</mt-tab-item>
            <mt-tab-item id="2">我的发布</mt-tab-item>
        </mt-navbar>
        <!-- tabcontainer -->
        <mt-tab-container v-model="selected" swipeable>
            <mt-tab-container-item id="1">
                <nav class="b-f4 p-b-7">
                    <ul>
                        <li v-for="list in accept">
                            <div class="h-2"></div>
                            <div class="raise-goods ma b-f">
                                <div class="flex">
                                    <div class="row m-t-18">
                                        <div>
                                            <img :src="list.usersTo.portrait" alt="" class="portrait">
                                        </div>
                                        <div class="m-l-14">
                                            <h2 class="fs-36 c-3">{{list.usersTo.nickName}}</h2>
                                            <p class="fs-24 c-3 m-t-1">{{list.school.name}}</p>
                                        </div>
                                    </div>
                                    <div class="m-t-28">
                                        {{list.createTime}}
                                    </div>
                                </div>
                                <div class="fs-exceed-2">
                                    {{list.requirement}}
                                </div>
                                <div class="bb-1-e m-t-1"></div>
                                    <!--0待支付1支付成功待接2已接3已完成4确认已完成5处理中6发布者确认订单-->
                                    <!--如果states等于2的话说明 发布者还没有同意  接受者可以取消订单-->
                                <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 2">
                                    <span>抢单待确定</span> 
                                    <button class="rg-button c-f m-l-25" @click="acceptCancel(list.payrollId)">取消订单</button>
                                </div>
                                 <!--如果states等于6的话说明 发布者意见同意  接受者不能取消，只能完成-->
                                <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 6">
                                    <span>抢单已确定</span>
                                    <button class="rg-button c-f m-l-25" @click="acceptAchieve(list.payrollId)">确定完成</button>
                                </div>
                                <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 3">
                                    <span>抢单已完成</span>
                                    <button class="rg-button c-f m-l-25">请等待</button>
                                </div>
                                <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 4">
                                    <!--<span>抢单已完成</span>-->
                                    <button class="rg-button c-f m-l-25">抢单结束</button>
                                </div>
                                 <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 5">
                                    <span>等待第三方处理</span>
                                    <button class="rg-button c-f m-l-25">有争议</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <nav class="b-f4 p-b-7">
                    <ul>
                        <li v-for="list in publish">
                            <div class="h-2"></div>
                            <div class="raise-goods ma b-f">
                                <div class="flex">
                                    <div class="row m-t-18">
                                        <div>
                                            <img :src="list.usersTo.portrait" alt="" class="portrait">
                                        </div>
                                        <div class="m-l-14">
                                            <h2 class="fs-36 c-3">{{list.usersTo.nickName}}</h2>
                                            <p class="fs-24 c-3 m-t-1">{{list.usersTo.userAuthentication.school.name}}</p>
                                        </div>
                                    </div>
                                    <div class="m-t-28">
                                        {{list.createTime}}
                                    </div>
                                </div>
                                <div class="fs-exceed-2">
                                    {{list.requirement}}
                                </div>
                                <div class="bb-1-e m-t-1"></div>
                                <!--list.states判断states的状态-->
                                <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 2">
                                    <span>已抢单</span>
                                    <button class="rg-button c-f m-l-25" @click="publishConfirm(list.payrollId)">确认订单</button>
                                </div>
                                 <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 1">
                                    <span>未抢单</span>
                                    <button class="rg-button c-f m-l-25" @click="publishCancel(list.payrollId)">取消订单</button>
                                </div>
                                 <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 3">
                                    <span>确认订单是否已完成</span>
                                    <button class="rg-button c-f m-l-25" @click="publishAchieve(list.payrollId)">确定完成</button>
                                </div>
                                <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 4">
                                    <!--<span>订单已结束</span>-->
                                    <button class="rg-button c-f m-l-25">订单已结束</button>
                                </div>
                                <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 5">
                                    <span>等待第三方处理</span>
                                    <button class="rg-button c-f m-l-25">有争议</button>
                                </div>
                                <div class="tr fs-28 rg-l p-b-1" v-if="list.states == 6">
                                    <span>等待订单完成中</span>
                                    <button class="rg-button c-f m-l-25">请等待</button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
            </mt-tab-container-item>
        </mt-tab-container>

    </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
import { contrastDate, z} from '../assets/js/common'
export default {
    name: 'page-navbar',

    data() {
        return {
            selected: '1',
            accept:"",   //接受的订单的信息
            publish:"",   //发布的订单的信息
        };
    },
    methods:{
        // 接受的筹帮
        indent(){
            this.$http({
                method:"post",
                url: localPath + "/payroll/selectPayrollByUserIn"
            }).then((data)=>{
                var arr = data.data.message;
                for(let i=0; i<arr.length; i++){
                    //今天前
                    arr[i].createTime = contrastDate(arr[i].createTime);
                }
                this.accept = arr;
                // console.log(this.accept);
            }).catch((error)=>{
                console.log(error);
            })
        },
        // 自己发布的筹帮
        oneselfIndent(){
            this.$http({
                method:"get",
                url: localPath +  "/payroll/selectPayrollByUserTo"
            }).then((data)=>{
               var arr = data.data.message;
               for(let i=0; i<arr.length; i++){
                   arr[i].createTime = contrastDate(arr[i].createTime);
               }
               this.publish = arr;
                console.log(this.publish);
            }).catch((error)=>{
                console.log(error);
            })
        },
        // 接受者取消订单
        acceptCancel(Id){
            var params = new URLSearchParams();
            params.append("payrollId", Id);

            this.$http({
                method:"post",
                url:localPath + "/payroll/updateStates2To1",
                data:params
            }).then((data)=>{
                MessageBox.alert(data.data.message);
                // 重新调订单详情 ，重新渲染页面
                this.indent();
            }).catch((error)=>{
                console.log(error);
            })
        },
         //接任务者完成抢单
        acceptAchieve(Id){
             var params = new URLSearchParams();
            params.append("payrollId", Id);

            this.$http({
                method:"post",
                url:localPath + "/payroll/updateStates6To3",
                data:params
            }).then((data)=>{
                MessageBox.alert(data.data.message);
                // 重新调订单详情 ，重新渲染页面
                this.indent();
            }).catch((error)=>{
                console.log(error);
            })
        },
        // 发布者确认订单
        publishConfirm(Id){
             var params = new URLSearchParams();
            params.append("payrollId", Id);

            this.$http({
                method:"post",
                url:localPath + "/payroll/updateStates2To6",
                data:params
            }).then((data)=>{
                MessageBox.alert(data.data.message);
              //调用oneselfIndent()重新渲染
               this.oneselfIndent()
            }).catch((error)=>{
                console.log(error);
            })
        },
        // 发布者取消订单
        publishCancel(Id){
             var params = new URLSearchParams();
            params.append("payrollId", Id);

            this.$http({
                method:"post",
                url:localPath + "/payroll/deletePayroll",
                data:params
            }).then((data)=>{
                MessageBox.alert(data.data.message);
              //调用oneselfIndent()重新渲染
               this.oneselfIndent()
            }).catch((error)=>{
                console.log(error);
            })
        },
        // 发布者确认订单订单
        publishAchieve(Id){
             var params = new URLSearchParams();
            params.append("payrollId", Id);

            this.$http({
                method:"post",
                url:localPath + "/payroll/updateStates3To4",
                data:params
            }).then((data)=>{
                MessageBox.alert(data.data.message);
              //调用oneselfIndent()重新渲染
               this.oneselfIndent()
            }).catch((error)=>{
                console.log(error);
            })
        },
        
    },
    mounted() {
        this.indent();
        this.oneselfIndent();
        document.addEventListener(z());
    },
};
</script>
<style>
.raiseGoods .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #c29354;
    color: #c29354;
    margin-bottom: -4px;
}

.raise-goods {
    width: 7rem;
    padding: 0 .12rem;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

.h-2 {
    height: .2rem;
}

.rg-button {
    width: 1.6rem;
    height: .5rem;
    background-color: #c29354;
    border-radius: 6px;
}

.rg-l {
    line-height: .7rem;
}
</style>
